<template>
  <div class="mobile-media-view">
    <!-- 移动端导航栏 -->
    <div class="mobile-header">
      <div class="header-content">
        <button class="nav-toggle" @click="toggleNavDrawer">
          <svg fill="none" viewBox="0 0 24 24">
            <line stroke="currentColor" stroke-width="2" x1="3" x2="21" y1="6" y2="6"/>
            <line stroke="currentColor" stroke-width="2" x1="3" x2="21" y1="12" y2="12"/>
            <line stroke="currentColor" stroke-width="2" x1="3" x2="21" y1="18" y2="18"/>
          </svg>
        </button>

        <h1 class="header-title">媒体库</h1>

        <div class="header-actions">
          <button class="action-btn search" @click="toggleSearch">
            <svg fill="none" viewBox="0 0 24 24">
              <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
              <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2"/>
            </svg>
          </button>
          <button class="action-btn camera" @click="openCamera">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z" stroke="currentColor" stroke-width="2"/>
              <circle cx="12" cy="13" r="4" stroke="currentColor" stroke-width="2"/>
            </svg>
          </button>
        </div>
      </div>

      <!-- 搜索栏 -->
      <div v-if="showSearch" class="mobile-search">
        <div class="search-input-wrapper">
          <svg class="search-icon" fill="none" viewBox="0 0 24 24">
            <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
            <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2"/>
          </svg>
          <input
            ref="searchInput"
            v-model="searchQuery"
            class="search-input"
            placeholder="搜索照片、视频..."
            type="text"
            @input="performSearch"
          />
          <button v-if="searchQuery" class="clear-search" @click="clearSearch">
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
              <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- 快捷操作栏 -->
    <div class="quick-actions">
      <div class="actions-container">
        <button class="quick-action" @click="openFileUpload">
          <div class="action-icon">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <span class="action-label">上传文件</span>
        </button>

        <button class="quick-action" @click="openCamera">
          <div class="action-icon camera">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z" stroke="currentColor" stroke-width="2"/>
              <circle cx="12" cy="13" r="4" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <span class="action-label">拍照</span>
        </button>

        <button class="quick-action" @click="openVideoRecord">
          <div class="action-icon video">
            <svg fill="none" viewBox="0 0 24 24">
              <polygon fill="currentColor" points="23,7 16,12 23,17"/>
              <rect fill="none" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="15" x="1" y="5"/>
            </svg>
          </div>
          <span class="action-label">录像</span>
        </button>

        <button class="quick-action" @click="openAlbums">
          <div class="action-icon album">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <span class="action-label">相册</span>
        </button>
      </div>
    </div>

    <!-- 媒体内容区域 -->
    <div class="media-content">
      <!-- 时间轴视图切换 -->
      <div class="view-controls">
        <div class="view-tabs">
          <button
            :class="{ active: currentView === 'timeline' }"
            class="tab-btn"
            @click="switchView('timeline')"
          >
            时间线
          </button>
          <button
            :class="{ active: currentView === 'grid' }"
            class="tab-btn"
            @click="switchView('grid')"
          >
            网格
          </button>
          <button
            :class="{ active: currentView === 'list' }"
            class="tab-btn"
            @click="switchView('list')"
          >
            列表
          </button>
        </div>

        <div class="view-options">
          <button class="options-btn" @click="showViewOptions = !showViewOptions">
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="4" x2="4" y1="21" y2="14"/>
              <line stroke="currentColor" stroke-width="2" x1="4" x2="4" y1="10" y2="3"/>
              <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="21" y2="12"/>
              <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="8" y2="3"/>
              <line stroke="currentColor" stroke-width="2" x1="20" x2="20" y1="21" y2="16"/>
              <line stroke="currentColor" stroke-width="2" x1="20" x2="20" y1="12" y2="3"/>
              <line stroke="currentColor" stroke-width="2" x1="1" x2="7" y1="14" y2="14"/>
              <line stroke="currentColor" stroke-width="2" x1="9" x2="15" y1="8" y2="8"/>
              <line stroke="currentColor" stroke-width="2" x1="17" x2="23" y1="16" y2="16"/>
            </svg>
          </button>

          <!-- 筛选选项下拉 -->
          <div v-if="showViewOptions" class="options-dropdown" @click.stop>
            <div class="dropdown-section">
              <h4>文件类型</h4>
              <label class="option-item">
                <input v-model="filters.showImages" type="checkbox" />
                <span>图片</span>
              </label>
              <label class="option-item">
                <input v-model="filters.showVideos" type="checkbox" />
                <span>视频</span>
              </label>
              <label class="option-item">
                <input v-model="filters.showAudio" type="checkbox" />
                <span>音频</span>
              </label>
            </div>
            <div class="dropdown-section">
              <h4>排序方式</h4>
              <label class="option-item">
                <input v-model="sortBy" type="radio" value="date-desc" />
                <span>最新优先</span>
              </label>
              <label class="option-item">
                <input v-model="sortBy" type="radio" value="date-asc" />
                <span>最旧优先</span>
              </label>
              <label class="option-item">
                <input v-model="sortBy" type="radio" value="name" />
                <span>按名称</span>
              </label>
              <label class="option-item">
                <input v-model="sortBy" type="radio" value="size" />
                <span>按大小</span>
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- 时间线视图 -->
      <div v-if="currentView === 'timeline'" class="timeline-view">
        <div
          v-for="group in groupedMedia"
          :key="group.date"
          class="timeline-group"
        >
          <div class="group-header">
            <h3 class="group-date">{{ formatGroupDate(group.date) }}</h3>
            <span class="group-count">{{ group.items.length }} 个文件</span>
          </div>
          <div class="group-grid">
            <div
              v-for="media in group.items"
              :key="media.id"
              :class="{ selected: isSelected(media.id) }"
              class="media-item"
              @click="openMediaViewer(media)"
              @touchend="onTouchEnd"
              @touchstart="onTouchStart(media, $event)"
            >
              <div class="media-thumbnail">
                <!-- 图片缩略图 -->
                <img
                  v-if="media.type === 'image'"
                  :alt="media.name"
                  :src="media.thumbnail"
                  class="thumbnail-img"
                  loading="lazy"
                />

                <!-- 视频缩略图 -->
                <div v-else-if="media.type === 'video'" class="video-thumbnail">
                  <img
                    :alt="media.name"
                    :src="media.thumbnail"
                    class="thumbnail-img"
                    loading="lazy"
                  />
                  <div class="video-overlay">
                    <svg class="play-icon" fill="none" viewBox="0 0 24 24">
                      <polygon fill="currentColor" points="5,3 19,12 5,21"/>
                    </svg>
                    <span class="duration">{{ formatDuration(media.duration) }}</span>
                  </div>
                </div>

                <!-- 音频文件图标 -->
                <div v-else-if="media.type === 'audio'" class="audio-thumbnail">
                  <svg fill="none" viewBox="0 0 24 24">
                    <path d="M9 18V5l12-2v13" stroke="currentColor" stroke-width="2"/>
                    <circle cx="6" cy="18" r="3" stroke="currentColor" stroke-width="2"/>
                    <circle cx="18" cy="16" r="3" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  <span class="duration">{{ formatDuration(media.duration) }}</span>
                </div>

                <!-- 选择标记 -->
                <div v-if="selectionMode" class="selection-checkbox">
                  <input
                    :checked="isSelected(media.id)"
                    type="checkbox"
                    @click.stop="toggleSelection(media.id)"
                  />
                </div>

                <!-- 文件信息覆盖层 -->
                <div class="media-overlay">
                  <div class="file-size">{{ formatFileSize(media.size) }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 网格视图 -->
      <div v-else-if="currentView === 'grid'" class="grid-view">
        <div class="media-grid">
          <div
            v-for="media in filteredMedia"
            :key="media.id"
            :class="{ selected: isSelected(media.id) }"
            class="grid-item"
            @click="openMediaViewer(media)"
            @touchend="onTouchEnd"
            @touchstart="onTouchStart(media, $event)"
          >
            <div class="grid-thumbnail">
              <img
                v-if="media.type === 'image'"
                :alt="media.name"
                :src="media.thumbnail"
                loading="lazy"
              />
              <div v-else-if="media.type === 'video'" class="video-grid-thumb">
                <img :alt="media.name" :src="media.thumbnail" loading="lazy" />
                <div class="video-indicator">
                  <svg fill="none" viewBox="0 0 24 24">
                    <polygon fill="currentColor" points="5,3 19,12 5,21"/>
                  </svg>
                </div>
              </div>
              <div v-else class="file-icon">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M9 18V5l12-2v13" stroke="currentColor" stroke-width="2"/>
                  <circle cx="6" cy="18" r="3" stroke="currentColor" stroke-width="2"/>
                  <circle cx="18" cy="16" r="3" stroke="currentColor" stroke-width="2"/>
                </svg>
              </div>

              <div v-if="selectionMode" class="grid-checkbox">
                <input
                  :checked="isSelected(media.id)"
                  type="checkbox"
                  @click.stop="toggleSelection(media.id)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 列表视图 -->
      <div v-else-if="currentView === 'list'" class="list-view">
        <div class="media-list">
          <div
            v-for="media in filteredMedia"
            :key="media.id"
            :class="{ selected: isSelected(media.id) }"
            class="list-item"
            @click="openMediaViewer(media)"
          >
            <div class="list-thumbnail">
              <img
                v-if="media.type === 'image'"
                :alt="media.name"
                :src="media.thumbnail"
                loading="lazy"
              />
              <div v-else-if="media.type === 'video'" class="video-list-thumb">
                <img :alt="media.name" :src="media.thumbnail" loading="lazy" />
                <svg class="play-overlay" fill="none" viewBox="0 0 24 24">
                  <polygon fill="currentColor" points="5,3 19,12 5,21"/>
                </svg>
              </div>
              <div v-else class="file-icon">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M9 18V5l12-2v13" stroke="currentColor" stroke-width="2"/>
                  <circle cx="6" cy="18" r="3" stroke="currentColor" stroke-width="2"/>
                  <circle cx="18" cy="16" r="3" stroke="currentColor" stroke-width="2"/>
                </svg>
              </div>
            </div>

            <div class="list-info">
              <h4 class="media-name">{{ media.name }}</h4>
              <div class="media-meta">
                <span class="media-date">{{ formatDate(media.date) }}</span>
                <span class="media-size">{{ formatFileSize(media.size) }}</span>
              </div>
              <div v-if="media.tags" class="media-tags">
                <span
                  v-for="tag in media.tags.slice(0, 3)"
                  :key="tag"
                  class="tag"
                >
                  {{ tag }}
                </span>
                <span v-if="media.tags.length > 3" class="more-tags">
                  +{{ media.tags.length - 3 }}
                </span>
              </div>
            </div>

            <div class="list-actions">
              <button class="list-action-btn" @click.stop="showMediaActions(media)">
                <svg fill="none" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="1" stroke="currentColor" stroke-width="2"/>
                  <circle cx="12" cy="5" r="1" stroke="currentColor" stroke-width="2"/>
                  <circle cx="12" cy="19" r="1" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>
            </div>

            <div v-if="selectionMode" class="list-checkbox">
              <input
                :checked="isSelected(media.id)"
                type="checkbox"
                @click.stop="toggleSelection(media.id)"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 无内容状态 -->
      <div v-if="filteredMedia.length === 0" class="empty-state">
        <div class="empty-icon">
          <svg fill="none" viewBox="0 0 24 24">
            <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
            <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
            <polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/>
          </svg>
        </div>
        <h3>暂无媒体文件</h3>
        <p>点击上方按钮开始上传或拍摄</p>
        <button class="upload-btn" @click="openFileUpload">
          <svg fill="none" viewBox="0 0 24 24">
            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2"/>
          </svg>
          上传文件
        </button>
      </div>
    </div>

    <!-- 底部选择栏 -->
    <div v-if="selectionMode && selectedItems.length > 0" class="selection-bar">
      <div class="selection-info">
        <span>已选择 {{ selectedItems.length }} 个文件</span>
        <button class="clear-selection" @click="clearSelection">
          清除选择
        </button>
      </div>
      <div class="selection-actions">
        <button class="selection-action" @click="shareSelected">
          <svg fill="none" viewBox="0 0 24 24">
            <circle cx="18" cy="5" r="3" stroke="currentColor" stroke-width="2"/>
            <circle cx="6" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
            <circle cx="18" cy="19" r="3" stroke="currentColor" stroke-width="2"/>
            <line stroke="currentColor" stroke-width="2" x1="8.59" x2="15.42" y1="13.51" y2="17.49"/>
            <line stroke="currentColor" stroke-width="2" x1="15.41" x2="8.59" y1="6.51" y2="10.49"/>
          </svg>
          分享
        </button>
        <button class="selection-action" @click="downloadSelected">
          <svg fill="none" viewBox="0 0 24 24">
            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2"/>
          </svg>
          下载
        </button>
        <button class="selection-action" @click="addToAlbum">
          <svg fill="none" viewBox="0 0 24 24">
            <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" stroke="currentColor" stroke-width="2"/>
          </svg>
          加入相册
        </button>
        <button class="selection-action danger" @click="deleteSelected">
          <svg fill="none" viewBox="0 0 24 24">
            <polyline points="3,6 5,6 21,6" stroke="currentColor" stroke-width="2"/>
            <path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2" stroke="currentColor" stroke-width="2"/>
          </svg>
          删除
        </button>
      </div>
    </div>

    <!-- 浮动操作按钮 -->
    <div class="fab-container">
      <div :class="{ expanded: fabExpanded }" class="fab-group">
        <button class="fab secondary" @click="toggleSelection">
          <svg fill="none" viewBox="0 0 24 24">
            <polyline points="20,6 9,17 4,12" stroke="currentColor" stroke-width="2"/>
          </svg>
        </button>
        <button class="fab secondary" @click="openCamera">
          <svg fill="none" viewBox="0 0 24 24">
            <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z" stroke="currentColor" stroke-width="2"/>
            <circle cx="12" cy="13" r="4" stroke="currentColor" stroke-width="2"/>
          </svg>
        </button>
        <button class="fab primary" @click="toggleFab">
          <svg fill="none" viewBox="0 0 24 24">
            <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="5" y2="19"/>
            <line stroke="currentColor" stroke-width="2" x1="5" x2="19" y1="12" y2="12"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- 侧边导航抽屉 -->
    <div v-if="showNavDrawer" class="nav-drawer-overlay" @click="toggleNavDrawer">
      <div class="nav-drawer" @click.stop>
        <div class="drawer-header">
          <div class="user-info">
            <div class="user-avatar">
              <img alt="用户头像" src="/default-avatar.png" />
            </div>
            <div class="user-details">
              <h3>家庭用户</h3>
              <p>family@example.com</p>
            </div>
          </div>
          <button class="close-drawer" @click="toggleNavDrawer">
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
              <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
            </svg>
          </button>
        </div>

        <nav class="drawer-nav">
          <a class="nav-item active" href="/media">
            <svg fill="none" viewBox="0 0 24 24">
              <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
              <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
              <polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/>
            </svg>
            媒体库
          </a>
          <a class="nav-item" href="/albums">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" stroke="currentColor" stroke-width="2"/>
            </svg>
            相册
          </a>
          <a class="nav-item" href="/favorites">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2"/>
            </svg>
            收藏夹
          </a>
          <a class="nav-item" href="/recent">
            <svg fill="none" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
              <polyline points="12,6 12,12 16,14" stroke="currentColor" stroke-width="2"/>
            </svg>
            最近访问
          </a>
          <a class="nav-item" href="/shared">
            <svg fill="none" viewBox="0 0 24 24">
              <circle cx="18" cy="5" r="3" stroke="currentColor" stroke-width="2"/>
              <circle cx="6" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
              <circle cx="18" cy="19" r="3" stroke="currentColor" stroke-width="2"/>
              <line stroke="currentColor" stroke-width="2" x1="8.59" x2="15.42" y1="13.51" y2="17.49"/>
              <line stroke="currentColor" stroke-width="2" x1="15.41" x2="8.59" y1="6.51" y2="10.49"/>
            </svg>
            共享文件
          </a>
          <a class="nav-item" href="/trash">
            <svg fill="none" viewBox="0 0 24 24">
              <polyline points="3,6 5,6 21,6" stroke="currentColor" stroke-width="2"/>
              <path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2" stroke="currentColor" stroke-width="2"/>
            </svg>
            回收站
          </a>
        </nav>

        <div class="drawer-footer">
          <a class="nav-item" href="/settings">
            <svg fill="none" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
              <path d="M12 1v6M12 17v6M4.22 4.22l4.24 4.24M15.54 15.54l4.24 4.24M1 12h6M17 12h6M4.22 19.78l4.24-4.24M15.54 8.46l4.24-4.24" stroke="currentColor" stroke-width="2"/>
            </svg>
            设置
          </a>
          <a class="nav-item" href="/help">
            <svg fill="none" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
              <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01" stroke="currentColor" stroke-width="2"/>
            </svg>
            帮助
          </a>
        </div>
      </div>
    </div>

    <!-- 文件上传隐藏input -->
    <input
      ref="fileInput"
      accept="image/*,video/*,audio/*"
      multiple
      style="display: none"
      type="file"
      @change="handleFileSelect"
    />

    <!-- 媒体查看器 -->
    <MediaViewer
      v-if="currentMedia"
      :media="currentMedia"
      :playlist="filteredMedia"
      @close="closeMediaViewer"
      @next="nextMedia"
      @previous="previousMedia"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import MediaViewer from '@/components/mobile/MediaViewer.vue'

const router = useRouter()

// 响应式数据
const showNavDrawer = ref(false)
const showSearch = ref(false)
const showViewOptions = ref(false)
const searchQuery = ref('')
const currentView = ref('timeline') // timeline, grid, list
const selectionMode = ref(false)
const selectedItems = ref<string[]>([])
const fabExpanded = ref(false)
const currentMedia = ref(null)

// 触摸相关
const touchStartTime = ref(0)
const touchStartMedia = ref(null)

// 筛选和排序
const filters = reactive({
  showImages: true,
  showVideos: true,
  showAudio: true
})

const sortBy = ref('date-desc')

// 搜索输入框引用
const searchInput = ref<HTMLInputElement>()
const fileInput = ref<HTMLInputElement>()

// 模拟媒体数据
const mediaList = ref([
  {
    id: '1',
    name: '海边日落.jpg',
    type: 'image',
    thumbnail: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop',
    date: new Date('2024-01-20T18:30:00'),
    size: 3200000,
    duration: null,
    tags: ['日落', '海边', '风景']
  },
  {
    id: '2',
    name: '家庭聚餐.mp4',
    type: 'video',
    thumbnail: 'https://images.unsplash.com/photo-1511632765486-a01980e01a18?w=400&h=300&fit=crop',
    date: new Date('2024-01-19T19:15:00'),
    size: 45600000,
    duration: 180,
    tags: ['家庭', '聚餐', '美食']
  },
  {
    id: '3',
    name: '生日歌.mp3',
    type: 'audio',
    thumbnail: null,
    date: new Date('2024-01-18T20:00:00'),
    size: 8100000,
    duration: 240,
    tags: ['音乐', '生日', '庆祝']
  },
  {
    id: '4',
    name: '公园散步.jpg',
    type: 'image',
    thumbnail: 'https://images.unsplash.com/photo-1551632811-561732d1e306?w=400&h=300&fit=crop',
    date: new Date('2024-01-18T15:45:00'),
    size: 2800000,
    duration: null,
    tags: ['公园', '散步', '家庭']
  },
  {
    id: '5',
    name: '宠物视频.mp4',
    type: 'video',
    thumbnail: 'https://images.unsplash.com/photo-1601758228041-f3b2795255f1?w=400&h=300&fit=crop',
    date: new Date('2024-01-17T14:20:00'),
    size: 32400000,
    duration: 95,
    tags: ['宠物', '可爱', '日常']
  }
])

// 计算属性
const filteredMedia = computed(() => {
  let filtered = mediaList.value

  // 应用搜索过滤
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(media =>
      media.name.toLowerCase().includes(query) ||
      media.tags?.some(tag => tag.toLowerCase().includes(query))
    )
  }

  // 应用类型过滤
  filtered = filtered.filter(media => {
    if (media.type === 'image' && !filters.showImages) return false
    if (media.type === 'video' && !filters.showVideos) return false
    if (media.type === 'audio' && !filters.showAudio) return false
    return true
  })

  // 应用排序
  switch (sortBy.value) {
    case 'date-desc':
      return filtered.sort((a, b) => b.date.getTime() - a.date.getTime())
    case 'date-asc':
      return filtered.sort((a, b) => a.date.getTime() - b.date.getTime())
    case 'name':
      return filtered.sort((a, b) => a.name.localeCompare(b.name))
    case 'size':
      return filtered.sort((a, b) => b.size - a.size)
    default:
      return filtered
  }
})

const groupedMedia = computed(() => {
  const groups = new Map()

  filteredMedia.value.forEach(media => {
    const dateKey = media.date.toDateString()
    if (!groups.has(dateKey)) {
      groups.set(dateKey, {
        date: media.date,
        items: []
      })
    }
    groups.get(dateKey).items.push(media)
  })

  return Array.from(groups.values()).sort((a, b) => b.date.getTime() - a.date.getTime())
})

// 工具函数
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
}

const formatDate = (date: Date): string => {
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days === 0) return '今天'
  if (days === 1) return '昨天'
  if (days < 7) return `${days} 天前`

  return date.toLocaleDateString('zh-CN', {
    month: 'long',
    day: 'numeric'
  })
}

const formatGroupDate = (date: Date): string => {
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days === 0) return '今天'
  if (days === 1) return '昨天'
  if (days < 7) return `${days} 天前`

  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

const formatDuration = (seconds: number): string => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 事件处理
const toggleNavDrawer = () => {
  showNavDrawer.value = !showNavDrawer.value
}

const toggleSearch = async () => {
  showSearch.value = !showSearch.value
  if (showSearch.value) {
    await nextTick()
    searchInput.value?.focus()
  } else {
    searchQuery.value = ''
  }
}

const clearSearch = () => {
  searchQuery.value = ''
  searchInput.value?.focus()
}

const performSearch = () => {
  // 搜索逻辑已通过计算属性处理
}

const switchView = (view: string) => {
  currentView.value = view
  showViewOptions.value = false
}

const toggleSelection = () => {
  selectionMode.value = !selectionMode.value
  if (!selectionMode.value) {
    selectedItems.value = []
  }
}

const isSelected = (mediaId: string): boolean => {
  return selectedItems.value.includes(mediaId)
}

const toggleSelection = (mediaId: string) => {
  const index = selectedItems.value.indexOf(mediaId)
  if (index > -1) {
    selectedItems.value.splice(index, 1)
  } else {
    selectedItems.value.push(mediaId)
  }
}

const clearSelection = () => {
  selectedItems.value = []
  selectionMode.value = false
}

const toggleFab = () => {
  fabExpanded.value = !fabExpanded.value
}

// 触摸事件处理
const onTouchStart = (media: any, event: TouchEvent) => {
  touchStartTime.value = Date.now()
  touchStartMedia.value = media
}

const onTouchEnd = () => {
  const touchDuration = Date.now() - touchStartTime.value
  if (touchDuration > 500) {
    // 长按进入选择模式
    if (!selectionMode.value) {
      selectionMode.value = true
      if (touchStartMedia.value) {
        toggleSelection(touchStartMedia.value.id)
      }
    }
  }
}

// 媒体操作
const openMediaViewer = (media: any) => {
  if (selectionMode.value) {
    toggleSelection(media.id)
  } else {
    currentMedia.value = media
  }
}

const closeMediaViewer = () => {
  currentMedia.value = null
}

const nextMedia = () => {
  if (!currentMedia.value) return
  const currentIndex = filteredMedia.value.findIndex(m => m.id === currentMedia.value.id)
  const nextIndex = (currentIndex + 1) % filteredMedia.value.length
  currentMedia.value = filteredMedia.value[nextIndex]
}

const previousMedia = () => {
  if (!currentMedia.value) return
  const currentIndex = filteredMedia.value.findIndex(m => m.id === currentMedia.value.id)
  const prevIndex = (currentIndex - 1 + filteredMedia.value.length) % filteredMedia.value.length
  currentMedia.value = filteredMedia.value[prevIndex]
}

// 文件操作
const openFileUpload = () => {
  fileInput.value?.click()
}

const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  const files = target.files
  if (files) {
    // 处理文件上传
    console.log('选择的文件:', Array.from(files))
    // 这里添加上传逻辑
  }
}

const openCamera = async () => {
  try {
    // 检查是否支持摄像头
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { facingMode: 'environment' },
      audio: false
    })

    // 打开相机界面
    router.push('/camera')

    // 停止预览流
    stream.getTracks().forEach(track => track.stop())

  } catch (error) {
    console.error('无法访问摄像头:', error)
    // 降级到文件选择
    openFileUpload()
  }
}

const openVideoRecord = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { facingMode: 'environment' },
      audio: true
    })

    router.push('/video-record')
    stream.getTracks().forEach(track => track.stop())

  } catch (error) {
    console.error('无法访问摄像头和麦克风:', error)
    openFileUpload()
  }
}

const openAlbums = () => {
  router.push('/albums')
}

// 选择操作
const shareSelected = () => {
  if (navigator.share) {
    // 使用Web Share API (如果支持)
    navigator.share({
      title: '分享媒体文件',
      text: `分享 ${selectedItems.value.length} 个文件`
    })
  } else {
    // 降级处理
    console.log('分享选中的文件:', selectedItems.value)
  }
}

const downloadSelected = () => {
  console.log('下载选中的文件:', selectedItems.value)
  // 实现批量下载逻辑
}

const addToAlbum = () => {
  router.push(`/albums/add?files=${selectedItems.value.join(',')}`)
}

const deleteSelected = () => {
  if (confirm(`确定要删除选中的 ${selectedItems.value.length} 个文件吗？`)) {
    console.log('删除选中的文件:', selectedItems.value)
    // 实现删除逻辑
    clearSelection()
  }
}

const showMediaActions = (media: any) => {
  console.log('显示媒体操作菜单:', media)
  // 显示操作菜单
}

// 页面初始化
onMounted(() => {
  // 监听点击事件，关闭选项下拉
  document.addEventListener('click', () => {
    showViewOptions.value = false
    fabExpanded.value = false
  })

  // 监听返回键
  window.addEventListener('popstate', () => {
    if (showNavDrawer.value) {
      showNavDrawer.value = false
    } else if (currentMedia.value) {
      currentMedia.value = null
    }
  })
})
</script>

<style lang="scss" scoped>
.mobile-media-view {
  min-height: 100vh;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
}

.mobile-header {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    min-height: 56px;

    .nav-toggle {
      width: 40px;
      height: 40px;
      background: none;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #374151;

      &:hover {
        background: #f3f4f6;
      }

      svg {
        width: 20px;
        height: 20px;
      }
    }

    .header-title {
      font-size: 1.125rem;
      font-weight: 600;
      color: #111827;
      margin: 0;
    }

    .header-actions {
      display: flex;
      gap: 0.5rem;

      .action-btn {
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #374151;

        &:hover {
          background: #f3f4f6;
        }

        &.camera {
          color: #3b82f6;
        }

        svg {
          width: 20px;
          height: 20px;
        }
      }
    }
  }

  .mobile-search {
    padding: 0 1rem 1rem;
    border-top: 1px solid #f3f4f6;

    .search-input-wrapper {
      position: relative;
      display: flex;
      align-items: center;

      .search-icon {
        position: absolute;
        left: 12px;
        width: 16px;
        height: 16px;
        color: #9ca3af;
        z-index: 1;
      }

      .search-input {
        width: 100%;
        padding: 12px 16px 12px 40px;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #f9fafb;
        font-size: 16px;
        color: #111827;

        &:focus {
          outline: none;
          border-color: #3b82f6;
          background: white;
        }
      }

      .clear-search {
        position: absolute;
        right: 12px;
        width: 20px;
        height: 20px;
        background: #e5e7eb;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6b7280;

        svg {
          width: 12px;
          height: 12px;
        }
      }
    }
  }
}

.quick-actions {
  background: white;
  padding: 1rem;
  border-bottom: 1px solid #f3f4f6;

  .actions-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;

    .quick-action {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem 0.5rem;
      background: none;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: background 0.2s ease;

      &:hover {
        background: #f9fafb;
      }

      .action-icon {
        width: 48px;
        height: 48px;
        background: #f3f4f6;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6b7280;

        &.camera {
          background: rgba(59, 130, 246, 0.1);
          color: #3b82f6;
        }

        &.video {
          background: rgba(239, 68, 68, 0.1);
          color: #ef4444;
        }

        &.album {
          background: rgba(16, 185, 129, 0.1);
          color: #10b981;
        }

        svg {
          width: 20px;
          height: 20px;
        }
      }

      .action-label {
        font-size: 0.75rem;
        color: #6b7280;
        font-weight: 500;
      }
    }
  }
}

.media-content {
  flex: 1;
  padding-bottom: 80px; // 为FAB预留空间
}

.view-controls {
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #f3f4f6;

  .view-tabs {
    display: flex;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 2px;

    .tab-btn {
      padding: 6px 12px;
      background: none;
      border: none;
      border-radius: 6px;
      font-size: 0.875rem;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.2s ease;

      &.active {
        background: white;
        color: #3b82f6;
        font-weight: 500;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .view-options {
    position: relative;

    .options-btn {
      width: 36px;
      height: 36px;
      background: none;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6b7280;

      &:hover {
        background: #f3f4f6;
      }

      svg {
        width: 16px;
        height: 16px;
      }
    }

    .options-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 8px;
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      min-width: 200px;
      z-index: 10;

      .dropdown-section {
        padding: 1rem;

        &:not(:last-child) {
          border-bottom: 1px solid #f3f4f6;
        }

        h4 {
          font-size: 0.875rem;
          font-weight: 600;
          color: #374151;
          margin: 0 0 0.75rem 0;
        }

        .option-item {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem 0;
          cursor: pointer;
          color: #6b7280;
          font-size: 0.875rem;

          input[type="checkbox"],
          input[type="radio"] {
            margin: 0;
            accent-color: #3b82f6;
          }
        }
      }
    }
  }
}

// 时间线视图
.timeline-view {
  .timeline-group {
    margin-bottom: 2rem;

    .group-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1rem 0.5rem;
      border-bottom: 1px solid #f3f4f6;

      .group-date {
        font-size: 1.125rem;
        font-weight: 600;
        color: #111827;
        margin: 0;
      }

      .group-count {
        font-size: 0.875rem;
        color: #6b7280;
      }
    }

    .group-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 2px;
      padding: 0.5rem;

      .media-item {
        aspect-ratio: 1;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        cursor: pointer;

        &.selected {
          ring: 2px solid #3b82f6;
        }

        .media-thumbnail {
          width: 100%;
          height: 100%;
          position: relative;

          .thumbnail-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .video-thumbnail {
            width: 100%;
            height: 100%;
            position: relative;

            .video-overlay {
              position: absolute;
              inset: 0;
              background: rgba(0, 0, 0, 0.3);
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              color: white;

              .play-icon {
                width: 24px;
                height: 24px;
                margin-bottom: 4px;
              }

              .duration {
                font-size: 0.75rem;
                background: rgba(0, 0, 0, 0.6);
                padding: 2px 6px;
                border-radius: 4px;
              }
            }
          }

          .audio-thumbnail {
            width: 100%;
            height: 100%;
            background: #f3f4f6;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #6b7280;

            svg {
              width: 32px;
              height: 32px;
              margin-bottom: 4px;
            }

            .duration {
              font-size: 0.75rem;
            }
          }

          .selection-checkbox {
            position: absolute;
            top: 8px;
            left: 8px;

            input[type="checkbox"] {
              width: 20px;
              height: 20px;
              accent-color: #3b82f6;
            }
          }

          .media-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            color: white;
            padding: 1rem 0.5rem 0.5rem;

            .file-size {
              font-size: 0.75rem;
              text-align: right;
            }
          }
        }
      }
    }
  }
}

// 网格视图
.grid-view {
  .media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 2px;
    padding: 0.5rem;

    .grid-item {
      aspect-ratio: 1;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      cursor: pointer;

      &.selected {
        ring: 2px solid #3b82f6;
      }

      .grid-thumbnail {
        width: 100%;
        height: 100%;
        position: relative;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .video-grid-thumb {
          width: 100%;
          height: 100%;
          position: relative;

          .video-indicator {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;

            svg {
              width: 24px;
              height: 24px;
              color: white;
            }
          }
        }

        .file-icon {
          width: 100%;
          height: 100%;
          background: #f3f4f6;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #6b7280;

          svg {
            width: 32px;
            height: 32px;
          }
        }

        .grid-checkbox {
          position: absolute;
          top: 8px;
          left: 8px;

          input[type="checkbox"] {
            width: 20px;
            height: 20px;
            accent-color: #3b82f6;
          }
        }
      }
    }
  }
}

// 列表视图
.list-view {
  .media-list {
    .list-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: white;
      border-bottom: 1px solid #f3f4f6;
      cursor: pointer;

      &:hover {
        background: #f9fafb;
      }

      &.selected {
        background: rgba(59, 130, 246, 0.05);
        border-left: 4px solid #3b82f6;
      }

      .list-thumbnail {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .video-list-thumb {
          position: relative;

          .play-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;

            svg {
              width: 20px;
              height: 20px;
            }
          }
        }

        .file-icon {
          width: 100%;
          height: 100%;
          background: #f3f4f6;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #6b7280;

          svg {
            width: 24px;
            height: 24px;
          }
        }
      }

      .list-info {
        flex: 1;
        min-width: 0;

        .media-name {
          font-size: 1rem;
          font-weight: 500;
          color: #111827;
          margin: 0 0 0.25rem 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .media-meta {
          display: flex;
          gap: 1rem;
          font-size: 0.875rem;
          color: #6b7280;
          margin-bottom: 0.5rem;
        }

        .media-tags {
          display: flex;
          gap: 0.5rem;
          flex-wrap: wrap;

          .tag {
            padding: 2px 8px;
            background: #f3f4f6;
            color: #6b7280;
            border-radius: 12px;
            font-size: 0.75rem;
          }

          .more-tags {
            font-size: 0.75rem;
            color: #9ca3af;
          }
        }
      }

      .list-actions {
        .list-action-btn {
          width: 36px;
          height: 36px;
          background: none;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #6b7280;

          &:hover {
            background: #f3f4f6;
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }
      }

      .list-checkbox {
        input[type="checkbox"] {
          width: 20px;
          height: 20px;
          accent-color: #3b82f6;
        }
      }
    }
  }
}

// 空状态
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: #6b7280;

  .empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    color: #d1d5db;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  h3 {
    font-size: 1.25rem;
    color: #374151;
    margin: 0 0 0.5rem 0;
  }

  p {
    margin: 0 0 2rem 0;
    font-size: 1rem;
  }

  .upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;

    svg {
      width: 18px;
      height: 18px;
    }
  }
}

// 选择栏
.selection-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  z-index: 50;

  .selection-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #374151;

    .clear-selection {
      color: #6b7280;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 0.875rem;
    }
  }

  .selection-actions {
    display: flex;
    gap: 0.75rem;

    .selection-action {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      padding: 0.75rem;
      background: #f9fafb;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      cursor: pointer;
      font-size: 0.75rem;
      color: #374151;

      &.danger {
        color: #dc2626;
        border-color: #fecaca;
        background: #fef2f2;
      }

      svg {
        width: 18px;
        height: 18px;
      }
    }
  }
}

// 浮动操作按钮
.fab-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;

  .fab-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    &.expanded .fab.secondary {
      transform: scale(1);
      opacity: 1;
    }

    .fab {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transition: all 0.3s ease;

      svg {
        width: 24px;
        height: 24px;
      }

      &.primary {
        background: #3b82f6;
        color: white;

        &:hover {
          background: #2563eb;
          transform: scale(1.1);
        }
      }

      &.secondary {
        background: white;
        color: #6b7280;
        transform: scale(0);
        opacity: 0;

        &:hover {
          color: #374151;
          transform: scale(1.1);
        }
      }
    }
  }
}

// 侧边导航抽屉
.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  backdrop-filter: blur(4px);

  .nav-drawer {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    background: white;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.3s ease;

    .drawer-header {
      padding: 2rem 1.5rem 1rem;
      border-bottom: 1px solid #f3f4f6;
      position: relative;

      .close-drawer {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 36px;
        height: 36px;
        background: none;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        color: #6b7280;

        svg {
          width: 18px;
          height: 18px;
        }
      }

      .user-info {
        display: flex;
        align-items: center;
        gap: 1rem;

        .user-avatar {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .user-details {
          h3 {
            font-size: 1.125rem;
            font-weight: 600;
            color: #111827;
            margin: 0 0 0.25rem 0;
          }

          p {
            font-size: 0.875rem;
            color: #6b7280;
            margin: 0;
          }
        }
      }
    }

    .drawer-nav {
      flex: 1;
      padding: 1rem 0;

      .nav-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1.5rem;
        text-decoration: none;
        color: #6b7280;
        font-size: 1rem;
        transition: all 0.2s ease;

        &:hover {
          background: #f9fafb;
          color: #374151;
        }

        &.active {
          background: rgba(59, 130, 246, 0.1);
          color: #3b82f6;
        }

        svg {
          width: 20px;
          height: 20px;
        }
      }
    }

    .drawer-footer {
      padding: 1rem 0;
      border-top: 1px solid #f3f4f6;

      .nav-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1.5rem;
        text-decoration: none;
        color: #6b7280;
        font-size: 1rem;
        transition: all 0.2s ease;

        &:hover {
          background: #f9fafb;
          color: #374151;
        }

        svg {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

// 响应式适配
@media (max-width: 480px) {
  .quick-actions .actions-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .timeline-view .timeline-group .group-grid,
  .grid-view .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .selection-bar .selection-actions {
    gap: 0.5rem;

    .selection-action {
      font-size: 0.7rem;
      padding: 0.5rem;
    }
  }
}

@media (max-width: 360px) {
  .timeline-view .timeline-group .group-grid,
  .grid-view .media-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>
